<!--
 * @Author: Lzx
 * @Date: 2022-04-21 08:20:04
 * @LastEditors: Lzx
 * @LastEditTime: 2023-05-24 00:21:01
 * @FilePath: /web-vue/src/pages/Housing/index.vue
 * @Description: 租房服务
-->
<template>
  <div>
    <el-row class="data-table row-panel row-panel-first">
      <el-col>
        <el-card>
          <el-row :gutter="0">
            <!-- 【房源】参数 -->
            <el-col>
              <el-form :model="queryForm" size="medium" :inline="true">
                <table
                  style="border-collapse: collapse; width: 100%"
                  class="table-common-style"
                >
                  <colgroup>
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                  </colgroup>
                  <tbody>
                    <tr>
                      <td><div class="form-item-label">房源名称：</div></td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="houseTitle">
                          <el-input
                            v-model.trim="queryForm.houseTitle"
                            placeholder="请输入查询参数"
                            clearable
                          >
                          </el-input>
                        </el-form-item>
                      </td>
                      <td><div class="form-item-label">地区：</div></td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="regionId">
                          <el-cascader
                            v-model="queryForm.regionId"
                            :options="$store.state.DICT.regionCode"
                            :props="{
                              expandTrigger: 'hover',
                              checkStrictly: true,
                              emitPath: false,
                              value: 'id',
                              label: 'name',
                            }"
                            placeholder="请选择地区"
                            clearable
                            @change="queryDataBtn()"
                          >
                          </el-cascader>
                        </el-form-item>
                      </td>
                      <td><div class="form-item-label">具体位置：</div></td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="detailLocation">
                          <el-input
                            v-model.trim="queryForm.detailLocation"
                            placeholder="请输入查询参数"
                            clearable
                          >
                          </el-input>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td><div class="form-item-label">房源类型：</div></td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="houseType">
                          <el-select
                            v-model="queryForm.houseType"
                            filterable
                            clearable
                            placeholder="请选择查询参数"
                            @change="queryDataBtn()"
                          >
                            <el-option
                              v-for="item in $store.state.DICT.houseTypeSelect"
                              :key="item.code"
                              :label="item.name"
                              :value="item.code"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </td>
                      <td>
                        <div class="form-item-label">配套服务设施：</div>
                      </td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="provide">
                          <el-input
                            v-model.trim="queryForm.provide"
                            placeholder="请输入查询参数"
                            clearable
                          >
                          </el-input>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr dir="ltr">
                      <td colspan="7"></td>
                      <td colspan="3">
                        <!-- 按钮 -->
                        <el-form-item>
                          <el-button
                            type="primary"
                            icon="el-icon-search"
                            @click="queryDataBtn()"
                            :loading="requestLoading"
                            >查询
                          </el-button>
                          <el-button
                            icon="el-icon-refresh-left"
                            @click="
                              () =>
                                Object.assign(
                                  this.queryForm,
                                  this.$options.data().queryForm
                                )
                            "
                            >清空查询条件
                          </el-button>
                        </el-form-item>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-form>
            </el-col>
            <!-- 【房源】信息表 -->
            <el-col>
              <el-divider content-position="left">
                <h3>房源信息表</h3>
              </el-divider>
              <el-row>
                <template v-for="o in tableData">
                  <el-col :span="6" :offset="1" :key="o.id">
                    <el-card
                      :body-style="{ padding: '0px' }"
                      class="house_card_list"
                    >
                      <el-col :span="24">
                        <!-- 图片 -->
                        <el-image
                          :src="`${$store.state.API_ROOT}${o.cover}`"
                          :preview-src-list="[
                            `${$store.state.API_ROOT}${o.cover}`,
                          ]"
                          class="image"
                          @click="routeToDetail(o.id)"
                        ></el-image>
                      </el-col>
                      <el-col :span="24">
                        <!-- 正文 -->
                        <div style="padding: 14px; height: 25vh">
                          <el-col :span="24">
                            <!-- 标题 -->
                            <div class="title" @click="routeToDetail(o.id)">
                              {{ o.houseTitle }}
                            </div>
                          </el-col>
                          <!-- 房型标签 -->
                          <el-col :span="24" class="row-margin">
                            <div>
                              <el-col :span="12">
                                <template
                                  v-for="(item, index) in $store.state.DICT
                                    .houseTypeSelect"
                                >
                                  <el-tag
                                    v-if="item.code === o.houseType"
                                    :key="index"
                                    :type="item.theme"
                                  >
                                    {{ item.name }}
                                  </el-tag>
                                </template>
                              </el-col>
                              <el-col :span="12">
                                <!-- 价格 -->
                                <div class="price">
                                  <el-tag type="danger"
                                    >优惠价
                                    <el-link type="danger" :underline="false"
                                      >￥ {{ o.cost }}</el-link
                                    >
                                  </el-tag>
                                </div>
                              </el-col>
                            </div>
                          </el-col>
                          <!-- 地区 -->
                          <el-col :span="16" class="row-margin">
                            <div>
                              <el-cascader
                                v-model="o.regionId"
                                :options="$store.state.DICT.regionCode"
                                :props="{
                                  expandTrigger: 'hover',
                                  checkStrictly: true,
                                  emitPath: false,
                                  value: 'id',
                                  label: 'name',
                                }"
                                size="mini"
                                disabled
                              >
                              </el-cascader>
                              <el-link type="info" :underline="false">{{
                                o.detailLocation
                              }}</el-link>
                            </div>
                          </el-col>
                          <el-col :span="8" class="row-margin">
                            <!-- 操作 -->
                            <el-button
                              v-if="o.houseStatus === 2"
                              type="primary"
                              icon="el-icon-s-home"
                              @click="$refs.orderAdd.openAddForm(true, o)"
                              >立即预定
                            </el-button>
                          </el-col>
                          <!-- 底部提示操作 -->
                          <el-col :span="24" class="row-margin">
                            <div class="bottom clearfix">
                              <time class="time">{{ o.updateTime }}</time>
                              <el-button
                                class="button"
                                type="none"
                                icon="el-icon-more"
                                @click="routeToDetail(o.id)"
                                >详情
                              </el-button>
                            </div>
                          </el-col>
                        </div>
                      </el-col>
                    </el-card>
                  </el-col>
                </template>
              </el-row>
            </el-col>
            <!-- 分页组件 -->
            <el-col>
              <el-pagination
                background
                @size-change="handlePageSizeChange"
                @current-change="handleCurrentPageChange"
                :current-page="page.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                align="center"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 猜你喜欢 -->
    <el-row class="data-table row-panel">
      <el-col>
        <el-card>
          <el-row :gutter="0">
            <!-- 【房源】参数 -->
            <el-col>
              <el-form :model="queryForm" size="medium" :inline="true">
                <table
                  style="border-collapse: collapse; width: 100%"
                  class="table-common-style"
                >
                  <colgroup>
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                  </colgroup>
                  <tbody>
                    <tr dir="ltr">
                      <td colspan>
                        <!-- 按钮 -->
                        <el-form-item>
                          <el-button
                            type="primary"
                            icon="el-icon-search"
                            @click="recommendHouseApi()"
                            :loading="requestLoading"
                            >刷新
                          </el-button>
                        </el-form-item>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-form>
            </el-col>
            <!-- 【房源】信息表 -->
            <el-col>
              <el-divider content-position="left">
                <h3>猜你喜欢</h3>
              </el-divider>
              <el-row>
                <template v-for="o in recommendTableData">
                  <el-col :span="6" :offset="1" :key="o.id">
                    <el-card
                      :body-style="{ padding: '0px' }"
                      class="house_card_list"
                    >
                      <el-col :span="24">
                        <!-- 图片 -->
                        <el-image
                          :src="`${$store.state.API_ROOT}${o.cover}`"
                          :preview-src-list="[
                            `${$store.state.API_ROOT}${o.cover}`,
                          ]"
                          class="image"
                          @click="routeToDetail(o.id)"
                        ></el-image>
                      </el-col>
                      <el-col :span="24">
                        <!-- 正文 -->
                        <div style="padding: 14px; height: 25vh">
                          <el-col :span="24">
                            <!-- 标题 -->
                            <div class="title" @click="routeToDetail(o.id)">
                              {{ o.houseTitle }}
                            </div>
                          </el-col>
                          <!-- 房型标签 -->
                          <el-col :span="24" class="row-margin">
                            <div>
                              <el-col :span="12">
                                <template
                                  v-for="(item, index) in $store.state.DICT
                                    .houseTypeSelect"
                                >
                                  <el-tag
                                    v-if="item.code === o.houseType"
                                    :key="index"
                                    :type="item.theme"
                                  >
                                    {{ item.name }}
                                  </el-tag>
                                </template>
                              </el-col>
                              <el-col :span="12">
                                <!-- 价格 -->
                                <div class="price">
                                  <el-tag type="danger"
                                    >优惠价
                                    <el-link type="danger" :underline="false"
                                      >￥ {{ o.cost }}</el-link
                                    >
                                  </el-tag>
                                </div>
                              </el-col>
                            </div>
                          </el-col>
                          <!-- 地区 -->
                          <el-col :span="16" class="row-margin">
                            <div>
                              <el-cascader
                                v-model="o.regionId"
                                :options="$store.state.DICT.regionCode"
                                :props="{
                                  expandTrigger: 'hover',
                                  checkStrictly: true,
                                  emitPath: false,
                                  value: 'id',
                                  label: 'name',
                                }"
                                size="mini"
                                disabled
                              >
                              </el-cascader>
                              <el-link type="info" :underline="false">{{
                                o.detailLocation
                              }}</el-link>
                            </div>
                          </el-col>
                          <el-col :span="8" class="row-margin">
                            <!-- 操作 -->
                            <el-button
                              v-if="o.houseStatus === 2"
                              type="primary"
                              icon="el-icon-s-home"
                              @click="$refs.orderAdd.openAddForm(true, o)"
                              >立即预定
                            </el-button>
                          </el-col>
                          <!-- 底部提示操作 -->
                          <el-col :span="24" class="row-margin">
                            <div class="bottom clearfix">
                              <time class="time">{{ o.updateTime }}</time>
                              <el-button
                                class="button"
                                type="none"
                                icon="el-icon-more"
                                @click="routeToDetail(o.id)"
                                >详情
                              </el-button>
                            </div>
                          </el-col>
                        </div>
                      </el-col>
                    </el-card>
                  </el-col>
                </template>
              </el-row>
            </el-col>
            <!-- 分页组件 -->
            <el-col>
              <el-pagination
                background
                @size-change="handlePageSizeChange2"
                @current-change="handleCurrentPageChange2"
                :current-page="page2.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page2.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page2.total"
                align="center"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 添加租房订单表单 -->
    <OrderAdd
      ref="orderAdd"
      @afterSubmit="() => $router.push('/Order')"
    ></OrderAdd>
  </div>
</template>

<script>
import {
  DateTimeRange_Picker_Option,
  DateRange_Picker_Option,
  Date_Picker_Option,
} from "@/utils/datePicker";
import OrderAdd from "@/views/HousingOrder/addForm";

export default {
  name: "houseShowList",
  components: { OrderAdd },

  data() {
    return {
      // 分页参数
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      // 【房源】数据表
      tableData: [],
      // 数据加载
      requestLoading: false,
      // 查询表单参数
      queryForm: {
        id: null,
        houseTitle: null,
        regionId: null,
        detailLocation: null,
        houseType: null,
        provide: null,
        detail: null,
        cost: null,
        discount: null,
        command: null,
        houseStatus: null,
        organizationId: null,
        createUser: null,
        createUserName: null,
        createTime: null,
        updateUser: null,
        updateUserName: null,
        updateTime: null,
      },
      // 分页参数
      page2: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      // 猜你喜欢，【房源】数据表
      recommendTableData: [],
      // 日期选择快捷方式
      DateTimeRange_Picker_Option,
      DateRange_Picker_Option,
      Date_Picker_Option,
    };
  },

  // 组件创建时
  created() {
    // 页面元素初始化
  },

  // 组件挂载时
  mounted() {
    this.queryDataBtn();
    this.recommendHouseApi();
  },

  methods: {
    // ---------------- 分页参数处理 START-----------------
    handleCurrentPageChange(val) {
      this.page.currentPage = val;
      // 查询【房源】表
      this.queryHouseApi();
    },
    handlePageSizeChange(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
      // 查询【房源】表
      this.queryHouseApi();
    },
    handleCurrentPageChange2(val) {
      this.page2.currentPage = val;
      // 刷新推荐列表【房源】
      this.recommendHouseApi();
    },
    handlePageSizeChange2(val) {
      this.page2.pageSize = val;
      this.page2.currentPage = 1;
      // 刷新推荐列表【房源】
      this.recommendHouseApi();
    },
    // ---------------- 分页参数处理 END-----------------

    // 查询【房源】
    queryDataBtn() {
      this.page.currentPage = 1;
      this.queryHouseApi();
    },

    // 查询参数处理
    queryParamProcess() {
      let param = Object.assign({}, this.queryForm);
      param["pageNum"] = this.page.currentPage;
      param["pageSize"] = this.page.pageSize;

      if (this.queryForm.createTime) {
        param["createTimeStart"] = this.queryForm.createTime[0];
        param["createTimeEnd"] = this.queryForm.createTime[1];
      }
      if (this.queryForm.updateTime) {
        param["updateTimeStart"] = this.queryForm.updateTime[0];
        param["updateTimeEnd"] = this.queryForm.updateTime[1];
      }

      delete param.createTime;
      delete param.updateTime;

      return param;
    },

    // 查询【房源】API
    queryHouseApi() {
      this.requestLoading = true;
      this.$api
        .searchHouse(this.queryParamProcess())
        .then((res) => {
          this.tableData = [];
          this.page.total = 0;

          let { status, message, data } = res.data;
          if (status == 200) {
            this.tableData = data.items;
            this.page.total = data.totalNum;
          } else if (status == 403) {
            this.$message({
              message: `权限不足！${message}`,
              type: "error",
              center: true,
              duration: 1680,
            });
          } else {
            this.$alert(`暂无数据记录！${message}`, "【房源】信息表", {
              type: "info",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }

          this.requestLoading = false;
        })
        .catch((err) => {
          this.requestLoading = false;
          console.log(`【房源】查询接口发生错误: ${err}`);
        });
    },

    // 【房源】推荐列表API，猜你喜欢
    recommendHouseApi() {
      this.requestLoading = true;
      let param = {};
      param["pageNum"] = this.page2.currentPage;
      param["pageSize"] = this.page2.pageSize;
      this.$api
        .recommendHouse(param)
        .then((res) => {
          this.recommendTableData = [];
          this.page2.total = 0;
          let { status, message, data } = res.data;
          if (status == 200) {
            this.recommendTableData = data.items;
            this.page2.total = data.totalNum;
          } else if (status == 403) {
            this.$message({
              message: `权限不足！${message}`,
              type: "error",
              center: true,
              duration: 1680,
            });
          }
          this.requestLoading = false;
        })
        .catch((err) => {
          this.requestLoading = false;
          console.log(`【房源】推荐列表接口发生错误: ${err}`);
        });
    },

    // TODO-lzx 路由到详情页（详情页需要每次监听路由变化，才能实时刷新）
    routeToDetail(houseId) {
      // 埋点，记录用户浏览行为
      this.$api
        .addUserBehavior({
          houseId: houseId,
          behaviorType: this.$store.state.DICT.behaviorTypeSelect[0]["code"],
        })
        .then((res) => {})
        .catch((err) => {
          console.log(`【用户行为记录】新增接口发生错误：${err}`);
        });
      // 路由跳转
      this.$router.push(`/Housing/detail/${houseId}`);
    },
  },
};
</script>

<style lang="scss" scoped>
// 表单布局样式
@import "@/assets/css/form-layout.scss";

.time {
  font-size: 13px;
  color: #999;
}

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #ebb563;
}

.title:hover {
  cursor: pointer;
}

.bottom {
  line-height: 12px;
  height: 20px;
  overflow: hidden;
}

.button {
  padding: 0;
  float: right;
}

.image {
  height: 180px;
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.house_card_list {
  margin-bottom: 10px;
}

.price {
  text-align: right;
}

.row-margin {
  margin: 10px 0px;
}
</style>
